﻿<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Typography</title>
		<link rel="shortcut icon" type="image/x-icon" href="Vertical/favicon.ico">
		<!-- google font -->
		<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet" type="text/css" />
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
		<link href="assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
		<link href="assets/css/ionicons.css" rel="stylesheet" type="text/css">
		<link href="assets/css/simple-line-icons.css" rel="stylesheet" type="text/css">
		<link href="assets/css/jquery.mCustomScrollbar.css" rel="stylesheet">
		<link href="assets/css/style.css" rel="stylesheet">
		<link href="assets/css/responsive.css" rel="stylesheet">
	</head>

	<body>
		<div class="wrapper">
			<!-- header -->
			<header class="main-header">
				<div class="container_header">
					<div class="logo d-flex align-items-center">
						<a href="#"> <strong class="logo_icon"> <img src="assets/images/small-logo.png" alt=""> </strong> <span class="logo-default"> <img src="assets/images/logo2.png" alt=""> </span> </a>
						<div class="icon_menu full_menu">
							<a href="#" class="menu-toggler sidebar-toggler"></a>
						</div>
					</div>
					<div class="right_detail">
						<div class="row d-flex align-items-center min-h pos-md-r">
							<div class="col-xl-5 col-3 search_col ">
								<div class="top_function">

									<div class="search">
										<a id="toggle_res_search" data-toggle="collapse" data-target="#search_form" class="res-only-view collapsed" href="javascript:void(0);"
										aria-expanded="false"> <i class=" icon-magnifier"></i> </a>
										<form id="search_form" role="search" class="search-form collapse" action="#">
											<div class="input-group">
												<input type="text" class="form-control" placeholder="Search...">
												<button type="button" class="btn" data-target="#search_form" data-toggle="collapse" aria-label="Close">
													<i class="ion-android-search"></i>
												</button>
											</div>
										</form>
									</div>
								</div>
							</div>
							<div class="col-xl-7 col-9 d-flex justify-content-end">
								<div class="right_bar_top d-flex align-items-center">

									<!-- notification_Start -->
									<div class="dropdown dropdown-notification">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="false"> <i class="fa fa-bell-o"></i> <span class="badge_coun"> 6 </span> </a>
										<ul class="dropdown-menu scroll_auto height_fixed" aria-labelledby="dropdownMenu1">
											<li class="bigger">
												<h3><span class="bold">Notifications</span></h3>
												<span class="notification-label">New 6</span>
											</li>
											<li>
												<ul class="dropdown-menu-list">
													<li>
														<a href="javascript:;"> <span class="time">just now</span> <span class="details"> <span class="notification-icon deepPink-bgcolor"> <i class="fa fa-check"></i> </span> Congratulations!. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">3 mins</span> <span class="details"> <span class="notification-icon purple-bgcolor"> <i class="fa fa-user o"></i> </span> <b>John Micle </b>is now following you. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">7 mins</span> <span class="details"> <span class="notification-icon blue-bgcolor"> <i class="fa fa-comments-o"></i> </span> <b>Sneha Jogi </b>sent you a message. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">12 mins</span> <span class="details"> <span class="notification-icon pink"> <i class="fa fa-heart"></i> </span> <b>Ravi Patel </b>like your photo. </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">15 mins</span> <span class="details"> <span class="notification-icon yellow"> <i class="fa fa-warning"></i> </span> Warning! </span> </a>
													</li>
													<li>
														<a href="javascript:;"> <span class="time">10 hrs</span> <span class="details"> <span class="notification-icon red"> <i class="fa fa-times"></i> </span> Application error. </span> </a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
									<!-- notification_End -->
									<!-- DropDown_Inbox -->
									<div class="dropdown dropdown-inbox">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> <i class="fa fa-envelope-o"></i> <span class="badge_coun"> 2 </span> </a>
										<ul class="dropdown-menu scroll_auto height_fixed" aria-labelledby="dropdownMenu1">
											<li class="bigger">
												<h3><span class="bold">Messages</span></h3>
												<span class="notification-label">New 2</span>
											</li>
											<li>
												<ul class="dropdown-menu-list">
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
													<li>
														<a href="#"> <span class="photo"> <img src="assets/images/about-1.jpg" class="img-circle" alt=""> </span> <span class="subject"> <span class="from"> Sarah Smith </span> <span class="time">Just Now </span> </span> <span class="message"> Jatin I found you on LinkedIn... </span> </a>
													</li>
												</ul>
											</li>
										</ul>
									</div>
									<!--DropDown_Inbox_End -->
									<!-- Dropdown_User -->
									<div class="dropdown dropdown-user">
										<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true" aria-expanded="true"> <img class="img-circle pro_pic" src="assets/images/about-1.jpg" alt=""> </a>
										<ul class="dropdown-menu dropdown-menu-default">
											<li>
												<a href="#"> <i class="icon-user"></i> Profile </a>
											</li>
											<li>
												<a href="#"> <i class="icon-settings"></i> Settings </a>
											</li>
											<li>
												<a href="#"> <i class="icon-directions"></i> Help </a>
											</li>
											<li class="divider"></li>
											<li>
												<a href="lock_screen.html"> <i class="icon-lock"></i> Lock </a>
											</li>
											<li>
												<a href="#"> <i class="icon-logout"></i> Log Out </a>
											</li>
										</ul>
									</div>
									<!-- Dropdown_User_End -->
								</div>
							</div>
						</div>
					</div>
				</div>

			</header>
			<!-- header_End -->
			<!-- Content_right -->
			<div class="container_full">

				<div class="side_bar scroll_auto">
                <div class="user-panel">
						<div class="user_image">
							<img src="assets/images/about-1.jpg" class="img-circle mCS_img_loaded" alt="User Image">
						</div>
						<div class="info">
							<p>
								Alexander Pierce
							</p>
							<a href="#"> <i class="fa fa-circle text-success"></i> Online</a>
						</div>
					</div>

					<ul id="dc_accordion" class="sidebar-menu tree">
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-home"></i> <span>Dashboard</span> 
							<span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="index.html">Dashboard 1</a>
								</li>
								<li>
									<a href="index1.html">Dashboard 2</a>
								</li>
								<li>
									<a href="index2.html">E-Commerce</a>
								</li>
								<li>
									<a href="index3.html">Analysis</a>
								</li>
								
								<li>
									<a href="index-green.html">Dashboard Green</a>
								</li>
								<li>
									<a href="index-orange.html">Dashboard Orange</a>
								</li>
								<li>
									<a href="index-purple.html">Dashboard Purple</a>
								</li>
								<li>
									<a href="index-red.html">Dashboard Red</a>
								</li>
								</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-newspaper-o"></i> <span>UI Elements </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="alert.html">Alerts</a>
								</li>
								<li>
									<a href="buttons.html">Buttons</a>
								</li>
								<li>
									<a href="cards.html">Cards</a>
								</li>
								<li>
									<a href="dropdown.html">Dropdowns</a>
								</li>
								<li>
									<a href="grid.html">Grids</a>
								</li>
								<li>
									<a href="lists.html">Lists</a>
								</li>
								<li>
									<a href="modal.html">Modals</a>
								</li>
								<li>
									<a href="progress.html"> Progress</a>
								</li>
								<li>
									<a href="popover-tooltips.html">Popover &amp; Tooltips</a>
								</li>
								<li>
									<a href="typography.html">Typography</a>
								</li>
								<li>
									<a href="tabs.html">Tabs</a>
								</li>
								<li>
									<a href="tree.html">Tree</a>
								</li>
								<li>
									<a href="toastr.html">Toastr Notification</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-pie-chart"></i> <span>Portlets</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="portlet-base.html">Portlets Base</a>
								</li>
								<li>
									<a href="portlet-advanced.html">Portlets Advanced</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-laptop"></i> <span>Icons</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="icon-font-awesome.html">Fontawesome Icons</a>
								</li>
								<li>
									<a href="icon-simple-line.html">Simple line Icons</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-table"></i> <span>Widgets </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="widgets-base.html">Widgets Base</a>
								</li>
								<li>
									<a href="widgets-chart.html">Widgets Chart</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-calendar"></i> <span>Calendar </span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="calendar-basic.html">Basic Calendar</a>
								</li>
								<li>
									<a href="calendar-external-events.html">External Events Calendar</a>
								</li>
								<li>
									<a href="calendar-list.html">List Calendar</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-wpforms"></i> <span>Forms</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li class="menu_sub">
									<a href="#">Form Control <span class="arrow"></span> </a>
									<ul class="down_menu lavel3">
										<li>
											<a href="form-basic-input.html">Basic Input</a>
										</li>
										<li>
											<a href="form-input-group.html">Input Group</a>
										</li>
										<li>
											<a href="form-checkbox-radio.html">Checkbox & Radio</a>
										</li>
									</ul>
								</li>
								<li class="menu_sub">
									<a href="#">Form Validation <span class="arrow"></span> </a>
									<ul class="down_menu lavel3">
										<li>
											<a href="form-validation-basic.html">Basic Validation</a>
										</li>
										<li>
											<a href="form-validation-jquery.html">jQuery Validation</a>
										</li>
										<li>
											<a href="form-wizard.html">Form Wizard</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="icon-grid"></i> <span>Data Tables</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="table-basic.html">Basic Table</a>
								</li>
								<li class="menu_sub">
									<a href="#">Data Tables <span class="arrow"></span> </a>
									<ul class="down_menu">
										<li>
											<a href="table-datatable.html">Basic Datatable</a>
										</li>
										<li>
											<a href="table-datatable-show-hide.html">Toggle Col Datatable</a>
										</li>
										<li>
											<a href="table-datatable-ajax.html">Ajax Datatable</a>
										</li>
									</ul>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-bar-chart text-aqua"></i> <span>Charts</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="flot-chart.html">Flot Charts</a>
								</li>
								<li>
									<a href="echart.html">eCharts</a>
								</li>
								<li>
									<a href="morris-chart.html">Morris Charts</a>
								</li>
							</ul>
						</li>
						<li class="menu_sub">
							<a href="#"> <i class="fa fa-file text-aqua"></i> <span>Extra Pages</span> <span class="arrow"></span> </a>
							<ul class="down_menu">
								<li>
									<a href="profile.html">User Profile</a>
								</li>
								<li>
									<a href="page-login.html">Sign In</a>
								</li>
								<li>
									<a href="page-register.html">Sign Up</a>
								</li>
								<li>
									<a href="invoice.html">Invoice</a>
								</li>
								<li>
									<a href="page_404.html">404</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>

				<!--main contents start-->
				<main class="content_wrapper">
					<!--page title start-->
					<div class="page-heading">
						<div class="container-fluid">
							<div class="row d-flex align-items-center">
								<div class="col-md-6">
									<div class="page-breadcrumb">
										<h1>Typography</h1>
									</div>
								</div>
								<div class="col-md-6 justify-content-md-end d-md-flex">
									<div class="breadcrumb_nav">
										<ol class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a class="parent-item" href="index.html">Home</a>
												<i class="fa fa-angle-right"></i>
											</li>
											<li class="active">
												Typography
											</li>
										</ol>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!--page title end-->
					<div class="container-fluid">
						<!-- state start-->
						<div class="row">

							<div class="col-xl-6">
								<div class="row">

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Heading Default
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													All HTML headings,
													<code>
														&lt;h1&gt;
													</code>
													through
													<code>
														&lt;h6&gt;
													</code>
													, are available.
												</p>
												<div class="table-responsive-lg">
													<table class="table">
														<tbody>
															<tr>
																<td><h1>h1. Bootstrap heading</h1></td>
																<td class="type-info">Semibold 2.5rem (40px)</td>
															</tr>
															<tr>
																<td><h2>h2. Bootstrap heading</h2></td>
																<td class="type-info">Semibold 2rem (32px)</td>
															</tr>
															<tr>
																<td><h3>h3. Bootstrap heading</h3></td>
																<td class="type-info">Semibold 1.75rem (28px)</td>
															</tr>
															<tr>
																<td><h4>h4. Bootstrap heading</h4></td>
																<td class="type-info">Semibold 1.5rem (24px)</td>
															</tr>
															<tr>
																<td><h5>h5. Bootstrap heading</h5></td>
																<td class="type-info">Semibold 1.25rem (20px)</td>
															</tr>
															<tr>
																<td><h6>h6. Bootstrap heading</h6></td>
																<td class="type-info">Semibold 1rem (16px)</td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Display headings
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand
													out, consider using a
													<strong>display heading</strong>—a larger, slightly more opinionated heading style.
												</p>
												<div class="table-responsive-lg">
													<table class="table">
														<tbody>
															<tr>
																<td><h1 class="display-1">Display 1</h1></td>
															</tr>
															<tr>
																<td><h1 class="display-2">Display 2</h1></td>
															</tr>
															<tr>
																<td><h1 class="display-3">Display 3</h1></td>
															</tr>
															<tr>
																<td><h1 class="display-4">Display 4</h1></td>
															</tr>
														</tbody>
													</table>
												</div>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Paragraph with justify
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													Use tags
													<code>
														text-justify
													</code>
													for get desire paragraph.
												</p>
												<p class="text-justify">
													Lid est laborum dolo rumes fugats untras. Etharums ser quidem dolores nemis omnis fugats vitaes nemo minima rerum facilis
													dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Lid est laborum dolo rumes fugats untras.
													Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minimarerums unsers sadips amets.
												</p>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Alignment text
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													Use tags
													<code>
														text-left, text-center, text-right
													</code>
													for get desire text.
												</p>
												<p class="text-left">
													Left aligned text.
												</p>
												<p class="text-center">
													Center aligned text.
												</p>
												<p class="text-right">
													Right aligned text.
												</p>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Text colors
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													Use following tags class for get desire text.
												</p>
												<p class="text-muted">
													This is an example of muted text. Add class
													<code>
														text-muted
													</code>
												</p>
												<p class="text-primary">
													This is an example of primary text. Add class
													<code>
														text-primary
													</code>
												</p>
												<p class="text-success">
													This is an example of success text. Add class
													<code>
														text-success
													</code>
												</p>
												<p class="text-info">
													This is an example of info text. Add class
													<code>
														text-info
													</code>
												</p>
												<p class="text-warning">
													This is an example of warning text. Add class
													<code>
														text-warning
													</code>
												</p>
												<p class="text-danger">
													This is an example of danger text. Add class
													<code>
														text-danger
													</code>
												</p>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Address
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													Use
													<code>
														address
													</code>
													for get desire address.
												</p>
												<address>
													<strong>TASi, Inc.</strong>
													<br>
													213 ABC Lane, Suite 120
													<br>
													San Francisco, NY.
													<br>
													<abbr title="Phone">P:</abbr>(123) 456-7890
												</address>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Description list alignment
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<dl class="row">
													<dt class="col-sm-3">
														Description lists
													</dt>
													<dd class="col-sm-9">
														A description list is perfect for defining terms.
													</dd>

													<dt class="col-sm-3">
														Euismod
													</dt>
													<dd class="col-sm-9">
														Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
													</dd>
													<dd class="col-sm-9 offset-sm-3">
														Donec id elit non mi porta gravida at eget metus.
													</dd>

													<dt class="col-sm-3">
														Malesuada porta
													</dt>
													<dd class="col-sm-9">
														Etiam porta sem malesuada magna mollis euismod.
													</dd>

													<dt class="col-sm-3 text-truncate">
														Truncated term is truncated
													</dt>
													<dd class="col-sm-9">
														Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
													</dd>

													<dt class="col-sm-3">
														Nesting
													</dt>
													<dd class="col-sm-9">
														<dl class="row">
															<dt class="col-sm-4">
																Nested definition list
															</dt>
															<dd class="col-sm-8">
																Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
															</dd>
														</dl>
													</dd>
												</dl>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Description list Vertical
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<dl>
													<dt>
														Description lists
													</dt>
													<dd>
														A description list is perfect for defining terms.
													</dd>
													<dt>
														Nafisha Tanisa
													</dt>
													<dd>
														Vestibulum id ligula porta felis euismod semper eget lacinia odio.
													</dd>
													<dd>
														Donec id elit non mi porta gravida at eget metus.
													</dd>
													<dt>
														Sazzad Tawsif
													</dt>
													<dd>
														Etiam porta sem malesuada magna mollis euismod.
													</dd>
												</dl>
											</div>
										</div>
									</div>

								</div>
							</div>

							<div class="col-xl-6">
								<div class="row">

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Heading with subtitle
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													All HTML headings,
													<code>
														&lt;h1&gt;
													</code>
													through
													<code>
														&lt;h6&gt;
													</code>
													, are available.
												</p>
												<h1> Heading 1 <small class="text-muted">Sub-heading</small></h1>
												<h2> Heading 2 <small class="text-muted">Sub-heading</small></h2>
												<h3> Heading 3 <small class="text-muted">Sub-heading</small></h3>
												<h4> Heading 4 <small class="text-muted">Sub-heading</small></h4>
												<h5> Heading 5 <small class="text-muted">Sub-heading</small></h5>
												<h6> Heading 6 <small class="text-muted">Sub-heading</small></h6>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Lead
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													Make a paragraph stand out by adding
													<code>
														.lead
													</code>
													.
												</p>
												<p class="lead">
													Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.
												</p>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Inline text elements
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													Styling for common inline HTML5 elements.
												</p>
												<div class="bd-example" data-example-id="">
													<p>
														You can use the mark tag to
														<mark>
															highlight
														</mark>
														text.
													</p>
													<p>
														<del>This line of text is meant to be treated as deleted text.</del>
													</p>
													<p>
														<s>This line of text is meant to be treated as no longer accurate.</s>
													</p>
													<p>
														<ins>This line of text is meant to be treated as an addition to the document.</ins>
													</p>
													<p>
														<u>This line of text will render as underlined</u>
													</p>
													<p>
														<small>This line of text is meant to be treated as fine print.</small>
													</p>
													<p>
														<strong>This line rendered as bold text.</strong>
													</p>
													<p>
														<em>This line rendered as italicized text.</em>
													</p>
												</div>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Blockquotes
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													For quoting blocks of content from another source within your document. Wrap
													<code>
														&lt;blockquote class="blockquote"&gt;
													</code>
													around any
													<abbr title="HyperText Markup Language">HTML</abbr> as the quote.
												</p>
												<blockquote class="blockquote">
													<p class="mb-0">
														Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
													</p>
												</blockquote>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Naming a source
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													Add a
													<code class="highlighter-rouge">
														&lt;footer class="blockquote-footer"&gt;
													</code>
													for identifying the source. Wrap the name of the source work in
													<code class="highlighter-rouge">
														&lt;cite&gt;
													</code>
													.
												</p>
												<blockquote class="blockquote">
													<p class="mb-0">
														Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
													</p>
													<footer class="blockquote-footer">
														Someone famous in
														<cite title="Source Title">Source Title</cite>
													</footer>
												</blockquote>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													Reverse layout
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<p>
													Add
													<code class="highlighter-rouge">
														.blockquote-reverse
													</code>
													for a blockquote with right-aligned content.
												</p>
												<blockquote class="blockquote blockquote-reverse">
													<p class="mb-0">
														Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
													</p>
													<footer class="blockquote-footer">
														Someone famous in
														<cite title="Source Title">Source Title</cite>
													</footer>
												</blockquote>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													List Unstyled
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<ul class="list-unstyled">
													<li>
														Lorem ipsum dolor sit amet
													</li>
													<li>
														Consectetur adipiscing elit
													</li>
													<li>
														Integer molestie lorem at massa
													</li>
													<li>
														Facilisis in pretium nisl aliquet
													</li>
													<li>
														Nulla volutpat aliquam velit
														<ul>
															<li>
																Phasellus iaculis neque
															</li>
															<li>
																Purus sodales ultricies
															</li>
															<li>
																Vestibulum laoreet porttitor sem
															</li>
															<li>
																Ac tristique libero volutpat at
															</li>
														</ul>
													</li>
													<li>
														Faucibus porta lacus fringilla vel
													</li>
													<li>
														Aenean sit amet erat nunc
													</li>
													<li>
														Eget porttitor lorem
													</li>
												</ul>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													List Unordered
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<ul>
													<li>
														Lorem ipsum dolor sit amet
													</li>
													<li>
														Consectetur adipiscing elit
													</li>
													<li>
														Integer molestie lorem at massa
													</li>
													<li>
														Facilisis in pretium nisl aliquet
													</li>
													<li>
														Nulla volutpat aliquam velit
														<ul>
															<li>
																Phasellus iaculis neque
															</li>
															<li>
																Purus sodales ultricies
															</li>
															<li>
																Vestibulum laoreet porttitor sem
															</li>
															<li>
																Ac tristique libero volutpat at
															</li>
														</ul>
													</li>
													<li>
														Faucibus porta lacus fringilla vel
													</li>
													<li>
														Aenean sit amet erat nunc
													</li>
													<li>
														Eget porttitor lorem
													</li>
												</ul>
											</div>
										</div>
									</div>

									<div class="col-md-12">
										<div class="card card-shadow lobicard-custom-control mb-4">
											<div class="card-header">
												<div class="card-title">
													List Ordered
													<div class="dropdown">
														<div class="tools">
															<a class="fa fa-repeat btn-color box-refresh" href="javascript:;"></a>
															<a class="t-collapse btn-color fa fa-chevron-down" href="javascript:;"></a>
															<a class="t-close btn-color fa fa-times" href="javascript:;"></a>
														</div>
													</div>
												</div>

											</div>
											<div class="card-body card_chart">
												<ol>
													<li>
														Lorem ipsum dolor sit amet
													</li>
													<li>
														Consectetur adipiscing elit
													</li>
													<li>
														Integer molestie lorem at massa
													</li>
													<li>
														Facilisis in pretium nisl aliquet
													</li>
													<li>
														Nulla volutpat aliquam velit
														<ol>
															<li>
																Phasellus iaculis neque
															</li>
															<li>
																Purus sodales ultricies
															</li>
															<li>
																Vestibulum laoreet porttitor sem
															</li>
															<li>
																Ac tristique libero volutpat at
															</li>
														</ol>
													</li>
													<li>
														Faucibus porta lacus fringilla vel
													</li>
													<li>
														Aenean sit amet erat nunc
													</li>
													<li>
														Eget porttitor lorem
													</li>
												</ol>
											</div>
										</div>
									</div>

								</div>
							</div>
						</div>
						<!-- state end-->
					</div>
				</main>
				<!--main contents end-->
			</div>
			<!-- Content_right_End -->
			<!-- Footer -->
			<footer class="footer ptb-20">
				<div class="row">
					<div class="col-md-12 text-center">
						<div class="copy_right">
							<p>
								2018 © Dashboard Theme By
								<a href="http://www.17sucai.com/">Jeparo</a>
							</p>
						</div>
						<a id="back-to-top" href="#"> <i class="ion-android-arrow-up"></i> </a>
					</div>
				</div>
			</footer>
			<!-- Footer_End -->
		</div>
		<script type="text/javascript" src="assets/js/jquery.min.js"></script>
		<script type="text/javascript" src="assets/js/popper.min.js"></script>
		<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.mCustomScrollbar.concat.min.js"></script>
		<script type="text/javascript" src="assets/js/jquery.dcjqaccordion.2.7.js"></script>
		<script src="assets/js/custom.js" type="text/javascript"></script>
	</body>

</html>
